<template>
  <div class="app-container">
    <div class="head-container">
      <div class="crud-opts">
        <span class="crud-opts-left">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="datasource.newDia=true"
          >
            新增
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-edit"
            :disabled="xgDis"
            @click="datasource.xiuDia=true"
          >
            修改
          </el-button>
          <slot name="beforeExport" />
          <!--右侧-->
          <slot name="right" />
        </span>
      </div>
    </div>
    <!--新增页面-->
    <el-dialog append-to-body title="新增数据源配置" :close-on-click-modal="false" :visible.sync="datasource.newDia">
      <el-form ref="sourForm" :model="sourForm" :rules="rules" size="small" label-width="40%">
        <el-form-item label="数据库类型" prop="dbType">
          <el-select v-model="sourForm.value" placeholder="请选择" @change="changeSele">
            <el-option
              v-for="item in sourForm.sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="JDBC_URL" prop="jdbcUrl">
          <el-input v-model="sourForm.jdbcUrl" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="sourForm.title" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="数据库用户名" prop="userName">
          <el-input v-model="sourForm.userName" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="数据库密码" prop="pwd">
          <el-input v-model="sourForm.pwd" type="password" style="width: 52%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="float: left;" @click="test">连接测试</el-button>
        <el-button type="primary" @click="cannel('sourForm')">重置</el-button>
        <el-button type="primary" @click="complate('sourForm')">完成</el-button>
      </div>
    </el-dialog>
    <!--修改页面-->
    <el-dialog append-to-body title="修改数据源配置" :close-on-click-modal="false" :visible.sync="datasource.xiuDia">
      <el-form ref="sourForm" :model="sourForm" :rules="rules" size="small" label-width="40%">
        <el-form-item label="数据库类型" prop="dbType">
          <el-select v-model="sourForm.value" placeholder="请选择" @change="changeSele">
            <el-option
              v-for="item in sourForm.sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="JDBC_URL" prop="jdbcUrl">
          <el-input v-model="sourForm.jdbcUrl" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="sourForm.title" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="数据库用户名" prop="userName">
          <el-input v-model="sourForm.userName" type="text" style="width: 52%" />
        </el-form-item>
        <el-form-item label="数据库密码" prop="pwd">
          <el-input v-model="sourForm.pwd" type="password" style="width: 52%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="float: left;" @click="test">连接测试</el-button>
        <el-button type="primary" @click="cannel('sourForm')">重置</el-button>
        <el-button type="primary" @click="complate('sourForm')">完成</el-button>
      </div>
    </el-dialog>
    <!--主页面-->
    <el-table ref="table" :data="datasource.table" style="width: 100%;" @selection-change="seleChange">
      <el-table-column type="selection" align="center" />
      <el-table-column prop="title" label="数据源" />
      <el-table-column prop="dbType" label="数据库类型" />
      <el-table-column prop="jdbcUrl" label="JDBC_URL" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="pwd" label="密码" />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template>
          <el-popover
            v-permission="['admin','dict:del']"
            placement="top"
            width="180"
          >
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0" />
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  data() {
    return {
      dataSources: ['1', '2'],
      depts: [],
      xgDis: true,
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
        jdbcUrl: [{ required: true, message: '请输入数据库URL', trigger: 'blur' }]
      },
      sourForm: {
        sourceOptions: [{ value: '1', label: 'Oracle' }, { value: '2', label: 'Mysql' }],
        value: '',
        jdbcUrl: '',
        title: '',
        userName: '',
        pwd: ''
      },
      datasource: {
        xiuDia: false,
        newDia: false,
        table: [{ dbType: 'Mysql', jdbcUrl: 'xxx', title: '61Mysql源', userName: 'root', pwd: '******' },
          { dbType: 'Oracle', jdbcUrl: 'xxx', title: '61oracle源', userName: 'root', pwd: '******' }]
      }
    }
  },
  methods: {
    complate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cannel(formName) {
      this.$refs[formName].resetFields()
    },
    changeSele() {
      if (this.sourForm.value === '1') {
        this.sourForm.jdbcUrl = 'jdbc:oracle:thin:@xxxx:1521/orcl'
      } else if (this.sourForm.value === '2') {
        this.sourForm.jdbcUrl = 'jdbc:mysql://xxx:3306/mysql'
      } else {
        this.sourForm.jdbcUrl = ''
      }
    },
    test() {
      // 链接数据库 todo
      this.$notify({
        title: '成功',
        message: '数据库连接成功!',
        type: 'success'
      })
    },
    seleChange(selection) {
      if (selection.length > 0 && selection.length !== 1) {
        this.xgDis = true
      } else if (selection.length === 1) {
        this.xgDis = false
      } else {
        this.xgDis = true
      }
    }
  }
}
</script>

<style>

</style>
